<template>
  <div class="router-main-view">
    <p class="view-title">Modal组件</p>
    <ComponentsLayout title="基本用法" :code="ModalBasicCode">
      <ModalBasic />
    </ComponentsLayout>
    <ApiLayout :propData="PropData"></ApiLayout>
    <EventsLayout :data="events"></EventsLayout>
    <SlotsLayout :data="slot"></SlotsLayout>
  </div>
</template>

<script setup lang="ts">
import PropData from "@/views/props/Modal.prop";
import ApiLayout from "../ApiLayout.vue";
import EventsLayout from "../EventsLayout.vue";
import SlotsLayout from "../SlotsLayout.vue";

import ComponentsLayout from "../ComponentsLayout.vue";
import ModalBasic from "./ModalBasic.vue";
import ModalBasicCode from "./ModalBasic.vue?raw";

const events = [
  {
    name: "ok",
    explanation: "点击确定的回调",
    return: "无",
  },
  {
    name: "cancel",
    explanation: "点击取消的回调",
    return: "无",
  },
  {
    name: "close",
    explanation: "点击右上角关闭按钮触发",
    return: "无",
  },
];
const slot = [
  {
    name: "默认",
    explanation: "自定义默认插槽内容",
  },
  {
    name: "header",
    explanation: "自定义页头",
  },
  {
    name: "footer",
    explanation: "自定义页脚内容",
  },
];
</script>
<style lang="scss" scoped>
.router-main-view {
  .view-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 3;
  }
}
</style>
